<template>
  <div class="container">
    <el-card>
      <!--  -->
      <div class="box">
        <div class="key">
          <span>关键字</span>
          <el-input class="inp" v-model="keyword"></el-input>
        </div>
        <div class="status">
          <div class="status_box">
            <span>状态</span>
            <el-input class="inp" v-model="state"></el-input>
          </div>
          <div class="btn">
            <el-button @click="reset">清除</el-button>
            <el-button type="primary" @click="searchFn">搜索</el-button>
          </div>
        </div>
        <div class="add">
          <el-button type="success" @click="addFn">新增文章</el-button>
        </div>
      </div>
      <!-- 消息提示 -->
      <el-alert
        :title="`数据一共${counts}条`"
        type="info"
        show-icon
        :closable="false"
        class="tishi"
      >
      </el-alert>
      <!-- /消息提示 -->
      <!-- 表格区域 -->
      <el-table :data="art">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column label="文章标题">
          <!-- {{ art.videoURL ? '' }} -->
          <template v-slot="scoped">
            <span v-if="scoped.row.videoURL"
              >{{ scoped.row.title }}
              <i class="el-icon-film" @click="videoFn(scoped.row.videoURL)"></i
            ></span>
            <span v-else>{{ scoped.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column label="录入时间">
          <template v-slot="scoped">
            {{ scoped.row.createTime | relativeTime }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="状态">
          <template v-slot="scoped">
            <span v-if="scoped.row.state === 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scoped">
            <div class="wrap">
              <a href="JavaScript:;" @click="yulanFn(scoped.row)">预览</a>
              <a
                href="JavaScript:;"
                @click="statusFn(scoped.row)"
                class="yansshi"
                >{{ scoped.row.state === 1 ? '启用' : '禁用' }}</a
              >
              <a href="JavaScript:;" @click="editArtFn(scoped.row)">修改</a>
              <a href="JavaScript:;" @click="removeFn(scoped.row.id)">删除</a>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-pagination
        layout="prev,pager,next,sizes,jumper"
        :total="counts"
        background
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pagesize"
      >
      </el-pagination>
      <!-- /分页功能 -->
    </el-card>

    <!-- 修改文章弹出层 -->
    <el-dialog
      :title="title"
      :visible.sync="isEditDialogShow"
      width="70%"
      @close="closeFn"
    >
      <el-form
        :model="articeInfo"
        :rules="artRoles"
        ref="artRefForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="articeInfo.title"></el-input>
        </el-form-item>

        <el-form-item prop="articleBody" label="文章内容">
          <quill-editor
            class="quill-editor"
            ref="myTextEditor"
            v-model="articeInfo.articleBody"
            style="height: 250px"
          ></quill-editor>
        </el-form-item>

        <el-form-item label="视频地址">
          <el-input v-model="articeInfo.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetFn">取 消</el-button>
        <el-button type="primary" @click="submitFn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 预览文章 -->
    <el-dialog
      title="预览文章"
      :visible.sync="isDialogShow"
      width="70%"
      @close="yulanArt = ''"
    >
      <h1>{{ yulanArt.title }}</h1>
      <div class="yulanArt">
        <span>{{ yulanArt.createTime | relativeTime }}</span>
        <span>{{ yulanArt.title }}</span>
        <div class="yuArt" v-html="yulanArt.articleBody"></div>
      </div>
    </el-dialog>
    <!-- 视频 -->
    <div class="video-warp">
      <el-dialog :visible.sync="isVideoShow" width="70%" :show-close="false">
        <template #title>
          <el-button
            icon="el-icon-close"
            circle
            @click="videoClose"
            class="btnV"
          ></el-button>
        </template>
        <video :src="videoSrc" width="100%" height="100%" autoplay></video>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  list,
  remove,
  detail,
  update,
  add,
  changeState
} from '@/api/hmmm/articles'
// 富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  data() {
    return {
      art: [],
      counts: 0,
      page: 1,
      pagesize: 10,
      keyword: '',
      state: '',
      // 修改文章
      isEditDialogShow: false,
      // 保存文章信息
      articeInfo: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      artRoles: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ]
      },
      id: null,
      isStatus: 'add',
      isDialogShow: false,
      yulanArt: {},
      videoSrc: '',
      isVideoShow: false
    }
  },
  components: {
    quillEditor
  },
  created() {
    this.loadList()
  },
  computed: {
    title() {
      return this.isStatus === 'add' ? '添加文章' : '修改文章'
    }
  },
  methods: {
    // 获取面试技巧
    async loadList() {
      const { data } = await list({ page: this.page, pagesise: this.pagesize })
      // console.log(data)
      this.counts = data.counts
      this.art = data.items
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.page = 1
      this.loadList()
    },
    // 更新页码
    handleCurrentChange(page) {
      this.page = page
      this.loadList()
    },
    // 删除数据
    removeFn(id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该组题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({
            id
          })
          this.loadList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑数据
    async editArtFn(item) {
      // console.log(item)
      this.id = item.id
      const { data } = await detail({ id: item.id })
      // console.log(data)
      this.articeInfo = data
      this.isStatus = 'edit'
      this.isEditDialogShow = true
    },
    // 重置数据
    resetFn() {
      this.$refs.artRefForm.resetFields()
      this.isEditDialogShow = false
      this.id = ''
    },
    // 添加弹出
    addFn() {
      this.isStatus = 'add'
      this.isEditDialogShow = true
    },
    // 确定按钮提交
    submitFn() {
      this.$refs.artRefForm.validate(async (valid) => {
        if (!valid) {
          return this.$message('验证失败')
        }
        // 判断
        console.log(this.title)
        // 添加
        if (this.title === '添加文章') {
          try {
            await add(this.articeInfo)
            this.$message.success('添加文章成功')
          } catch (err) {
            this.$message.info('添加文章失败')
          }

          // console.log(data)
          // 修改
        } else {
          console.log(this.id)
          const edit = {
            id: this.id,
            title: this.articeInfo.title,
            articleBody: this.articeInfo.articleBody,
            videoURL: this.articeInfo.validate
          }
          try {
            await update(edit)
            this.$message.success('修改文章成功')
            this.articeInfo = {
              title: '',
              articleBody: '',
              videoURL: ''
            }
          } catch (err) {
            this.$message.info('修改失败')
          }
        }

        // console.log(data)
        this.isEditDialogShow = false
        this.loadList()
      })
    },
    // 关闭弹出层
    closeFn() {
      this.$refs.artRefForm.resetFields()
    },
    // 修改状态
    async statusFn(row) {
      try {
        // console.log(state)
        if (row.state === 1) {
          row.state = 0
        } else {
          row.state = 1
        }
        await changeState(row)
        this.$message.success('修改状态成功')
      } catch (err) {
        this.$message.info('修改状态失败')
      }
    },
    // 查询
    async searchFn() {
      try {
        const { data } = await list({
          keyword: this.keyword,
          state: this.state
        })
        this.counts = data.counts
        this.art = data.items
      } catch (err) {
        this.$message.info('查询失败')
      }
    },
    // 重置
    reset() {
      this.keyword = ''
      this.state = ''
      this.loadList()
    },
    // 预览效果
    async yulanFn(row) {
      console.log(row)
      this.yulanArt = row
      // const { data } = await detail({ id: row.id })
      // console.log(data)
      // this.articeInfo = data
      this.isDialogShow = true
    },
    // 视频播放
    videoFn(videoUrl) {
      this.videoSrc = videoUrl
      this.isVideoShow = true
    },
    // 关闭视频
    videoClose() {
      this.videoSrc = ''
      this.isVideoShow = false
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 20px;
  /deep/.video-warp {
    .el-dialog__header {
      background: rgba(0, 0, 0, 0) !important;
      padding: 0;
      // /* background: linear-gradient(to right, #1493fa, #01c6fa); */
      // /* background: #409EFF; */
      // /* border-radius: 9px 9px 0 0;
      .btnV {
        position: fixed;
        left: 50%;
        // margin-left: 50%;
        top: 40px;
        background-color: rgba(0, 0, 0, 0.36);
        border: 0px;
        .el-icon-close {
          color: #fff;
        }
      }
    }
    .el-dialog__body {
      background: rgba(0, 0, 0, 0) !important;
      padding: 0;
    }
  }
  .box {
    display: flex;
    justify-content: space-between;
    .key {
      .inp {
        margin-left: 15px;
        width: 300px;
        height: 30px;
      }
    }
    .status {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 50px;
      .inp {
        margin-left: 15px;
        width: 300px;
        height: 30px;
      }
      .btn {
        margin-left: 10px;
      }
    }
  }
  /deep/.yansshi {
    color: #4242ff;
  }
  // 消息提示框
  .tishi {
    margin: 18px 0;
  }
  /deep/.wrap {
    a {
      padding: 0 5px;
    }
  }
  .el-pagination {
    margin: 20px;
    float: right;
  }
  /deep/.quill-editor {
    margin-bottom: 100px;
  }
  /deep/.yuArt {
    margin-top: 20px;
    padding: 20px;
    width: 100%;
    // height: 200px;
    background: #f5f5f5;
  }
  .yulanArt {
    span {
      padding-right: 20px;
      height: 100%;
    }
  }
  /deep/.el-icon-film {
    margin-left: 10px;
    color: #4242ff;
    font-size: 18px;
  }
}
</style>
